<template>
  <view class="doctor-detail" v-cloak>
    <uni-nav-bar class="home-nav" left-icon='back' @clickLeft="handleBack()" title="医师详情" backgroundColor="transparent" statusBar="true" :border="false"></uni-nav-bar>
    <view class="detail-header">
      <image :src="info.avatar || '../static/doctor-default.png'" mode="aspectFill" class="header-img"></image>
      <view class="header-info">
        <h2>{{info.realName}} <image class="info-icon" src="@/static/doctor/check.png" mode="aspectFill"></image> <image class="info-icon" src="@/static/doctor/verify.png" mode="aspectFill"></image> <image class="info-icon" src="@/static/doctor/add-home.png" mode="aspectFill"></image> <!-- <span>{{}}</span> --></h2>
        <view class="info-p">从业{{info.workYear}}年 <span style="color: #B0B0B0; font-size: 22rpx;margin: 0 8rpx">|</span> {{info.jobTitle}}</view>
        <view class="info-footer">好评{{info.goodComment}}</view>
      </view>
      <!-- <image src="https://fine-yahe.oss-cn-shanghai.aliyuncs.com/app/empty/doctor-detail-header.png" mode="aspectFill" class="header-handle"></image> -->
    </view>
    
    <view class="detail-card">
      <view class="card-title">医生擅长</view>
      <view class="card-p">{{info.beGoodAtDesc}}</view>
    </view>
    <view class="detail-card" style="padding-bottom: 32rpx; border-bottom: 2rpx solid #EFEFEF; margin-bottom: 0;">
      <view class="card-title">医生简介</view>
      <view class="card-p">{{info.introduction}}</view>
    </view>
    
   <view class="detail-evaluation" v-if="commentList.length">
      <view class="title">精选评价({{params.total}}) <uni-icons @click="handleMoreComment()" type="right" size="14" color="#B0B0B0"></uni-icons> </view>
      <SinyuEvaluation :list="commentList" @onMore="handleMoreComment()" :hasMore="true"></SinyuEvaluation>
    </view>
    
    <view class="detail-store">
      <view class="store-title">所属门店</view>
      <view class="store-item">
        <view class="item-title"><h2>{{selectStore.name}}</h2></view>
        <view class="item-p">
          <image class="p-img" src="@/static/position-gray.png" mode="aspectFill"></image>
          <h4 v-if="selectStore.distance">距您{{selectStore.distance}}</h4>
          <view class="p-span dot">{{selectStore.address}}</view>
        </view>
        <view class="item-p" v-if="selectStore.timeSlotReq.startTime">
          <image class="p-img" src="@/static/time-gray.png" mode="aspectFill"></image>
          <view class="p-span dot">{{selectStore.timeSlotReq.startTime}} - {{selectStore.timeSlotReq.endTime}}</view>
        </view>
      </view>
    </view>
    
    <view class="detail-footer">
      <view class="footer-item" @click="handleTalk()">
        <image src="@/static/tell-green.png" class="item-img" mode="aspectFill"></image>
        电话
      </view>
  <!--    <view class="footer-item">
        <image src="@/static/talk-green.png" class="item-img" mode="aspectFill"></image>
        咨询
      </view> -->
      <view class="footer-button" @click="handleInvitation()">预约到店</view>
    </view>
  </view>
</template>

<script>
  import SinyuEvaluation from '@/components/SinyuEvaluation.vue';
  export default {
    components:{SinyuEvaluation},
    data() {
      return {
        info:{},
        params:{
          page:1,
          pageSize:5
        },
        selectStore:uni.getStorageSync('selectStore'),
        commentList:[]
      };
    },
    onLoad(ops) {
      uni.showLoading({
        title:'加载中'
      })
      this.$get(`/merchant/v1/staff/${ops.id}`,'','1').then(res=>{
        if(res.code == '1') this.info = res.content
      })
      this._getCommentList({
        topicId:ops.id,selection:1
      })
    },
    methods:{
      handleBack(){
        uni.navigateBack({
          delta:1
        })
      },
      handleTalk(){  //  拨打电话
        if(this.info.contact){
          uni.makePhoneCall({
            phoneNumber:this.info.contact
          })
        }
      },
      handlePreview(img,idx){ ///  预览图片
        uni.previewImage({
          urls:img,
          current:idx
        })
      },
      handleInvitation(){
        uni.verifyLogin()
        uni.navigateTo({
          url:`/pages/family-doctor/invitation-submit?id=${this.info.id}`
        })
      },
      handleMoreComment(){
        uni.navigateTo({
          url:`/mainPackage/all-evaluation?topicId=${this.info.id}&appId=yh_org_doctor`
        })
      },
      ///   network
      _getCommentList(value){
        const data = {
          appId:'yh_org_doctor',
          ...this.params,
          ...value
        }
        this.$get('/social/yahe/comment/pageList',data,'1').then(res=>{
          if(res.code == '1'){
            this.params.total = res.content.pagination.totalCount
            this.commentList = [...this.commentList,...res.content.list]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.doctor-detail{
  padding: 0 24rpx 100rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient( 180deg, rgba(16, 190, 175, 0.22) 0%, #fff 700rpx);
  ::v-deep.uni-navbar__header{
    padding: 0!important;
  }
  .detail-header{
    padding: 32rpx 24rpx;
    border-radius: 20rpx;
    box-shadow: 0rpx 6rpx 20rpx -4rpx rgba(16,190,175,0.15);
    display: flex;
    align-items: center;
    background: #fff;
    .header-img{
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      margin-right: 24rpx;
    }
    .header-info{flex: 1;}
    h2{
      font-size: 28rpx;
      color: var(--title-color);
      font-weight: bold;
      display: flex;
      align-items: center;
      .info-icon{
        width: 32rpx;
        height: 33rpx;
        margin:0 10rpx;
      }
      span{
        line-height: 1;
        font-weight: 400;
        font-size: 18rpx;
        padding: 6rpx 14rpx;
        color: var(--theme-color);
        background: #F0FDFA;
        border-radius: 32rpx;
        // margin-left: 6rpx;
        border: 2rpx solid #D9F4F2;
      }
    }
    .info-p{
      font-size: 22rpx;
      margin: 18rpx 0 16rpx;
      color: var(--title-color);
    }
    .info-footer{
      color: var(--sub-title);
      font-size: 22rpx;
      line-height: 33rpx;
    }
    .header-handle{
      width: 156rpx;
      height: 156rpx;
    }
  }  //  detail-header end
  
  .detail-card{
    margin: 40rpx 0;
    .card-title{
      font-size: 28rpx;
      font-weight: bold;
    }
    .card-p{
      font-size: 24rpx;
      line-height: 36rpx;
      color: #6D6D6D;
      margin-top: 12rpx;
    }
  }
  
  .detail-evaluation{
    .title{
      line-height: 88rpx;
      font-size: 28rpx;
      color: var(--title-color);
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-weight: bold;
    }
  }
  
  .detail-store{
    padding-top: 32rpx;
    margin-top: 32rpx;
    border-top: 2rpx solid #efefef;
    .store-title{
      font-size: 28rpx;
      color: var(--title-color);
      font-weight: bold;
    }
    .store-item{
      padding: 32rpx 0;
      .item-title{
        display: flex;
        align-items: center;
        h2{
          font-size: 26rpx;
          font-weight: bold;
          color: var(--title-color);
        }
        span{
          display: block;
          font-size: 18rpx;
          line-height: 1;
          margin-left: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
          color: #fff;
          background: var(--theme-color);
        }
      }
      .item-p{
        display: flex;
        align-items: center;
        font-size: 22rpx;
        color: #B0B0B0;
        margin-top: 16rpx;
        .p-img{
          width: 26rpx;
          height: 26rpx;
          margin-right: 10rpx;
        }
        h4{
          margin-right: 20rpx;
          color: var(--title-color);
        }
      }
    }
  }  // detail-store end 
  
  .detail-footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12rpx 24rpx;
    display: flex;
    align-items: center;
    background: #fff;
    .footer-item{
      text-align: center;
      font-size: 20rpx;
      color: var(--title-color);
      margin-right: 48rpx;
      .item-img{
        width: 52rpx;
        height: 52rpx;
        display: block;
      }
    }
    .footer-button{
      flex: 1;
      line-height: 72rpx;
      color: 28rpx;
      background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      text-align: center;
      border-radius: 72rpx;
      color: #fff;
    }
  }
}
</style>
